<template>
  <!-- 地球表面的线和直线 -->
  <div class="page-container">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    terrain: Cesium.Terrain.fromWorldTerrain(),
  });

  const positions = [];
  const colors = [];
  for (let i = 0; i < 12; i++) {
    positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + 5 * i, 40.0));
    colors.push(Cesium.Color.fromRandom({ alpha: 1.0 }));
  }
  // 几何体
  const geometry = new Cesium.PolylineGeometry({
    positions: positions,
    width: 10.0,
    vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
    colors: colors,
    colorsPerVertex: true, // 渐变
  });
  // 外表
  const appearance = new Cesium.PolylineColorAppearance();
  const lineEntity = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: geometry,
    }),
    appearance: appearance,
  });

  viewer.scene.primitives.add(lineEntity);

});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
